<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <swiper class="swiper" v-if="configData.store_apply_banner.length > 0">
      <swiper-item
        v-for="(item, index) in configData.store_apply_banner"
        :key="index"
      >
        <image class="pic" :src="item"></image>
      </swiper-item>
    </swiper>
    <view class="formBox">
      <view class="formItem">
        <text class="title">店铺名称</text>
        <input type="text" placeholder="请输入店铺名称" v-model="form.name" />
      </view>
      <picker
        :range="classify"
        range-key="name"
        @change="changeClass"
        mode="selector"
      >
        <view class="formItem">
          <text class="title">店铺类目</text>
          <view class="chooseClass">
            <text>{{ catName == "" ? "请选择店铺类目" : catName }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </picker>
      <view class="formItem">
        <text class="title">手机号</text>
        <input
          type="text"
          placeholder="请输入手机号"
          v-model="form.mobile"
          disabled
        />
      </view>
      <view class="formItem" v-if="status != 0">
        <text class="title">密码</text>
        <input type="text" placeholder="请输入密码" v-model="form.password" />
      </view>
      <view class="choosePic" style="border-bottom: 1px solid #f1f1f1">
        <view class="title">
          <text>店铺Logo</text>
          <text>（必填）</text>
        </view>
        <view class="choose" v-if="form.logo == ''" @click="addPic('logo')">
          <text class="iconfont icon-camera"></text>
          <text>上传</text>
        </view>
        <view class="choose" v-else>
          <image :src="form.logo"></image>
          <text
            class="close iconfont icon-close"
            @click.stop="form.logo = ''"
          ></text>
        </view>
      </view>
    </view>
    <view class="foot">
      <button
        type="warn"
        class="btn"
        v-if="status == -1"
        @click="submit"
        :loading="btnLoading"
      >
        提交
      </button>
      <button type="warn" class="btn" v-if="status == 0" :disabled="true">
        等待审核
      </button>
      <button
        type="warn"
        class="btn"
        v-if="status == 2"
        @click="submit"
        :loading="btnLoading"
      >
        已拒绝,请重新编辑提交
      </button>
      <view class="tip">
        <radio
          :checked="read"
          color="#f0250e"
          @click="read = !read"
          style="transform: scale(0.7)"
        />
        <text>我已经阅读并了解</text>
        <text style="color: #f0250e" @click="gotoAgreement"
          >《店铺入驻协议》</text
        >
      </view>
    </view>
    <login-modal></login-modal>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import http from "@/common/http.js";
export default {
  components: {
    Shenhe
  },
  data() {
    return {
      classify: [],
      form: {
        name: "",
        cat_id: "",
        mobile: "",
        password: "",
        logo: "",
        type: 1
      },
      // 是否阅读协议
      read: true,
      // 类名名称
      catName: "",
      // 配置消息
      configData: {
        store_apply_banner: [],
        store_apply_agreement: ""
      },
      // 审核状态
      status: "-1"
    };
  },
  onLoad(options) {
    if (this.$utils.isLogin(false)) {
      this.getApplyStatus();
      this.getClass();
      this.getConfig();

      const { binding } = uni.getStorageSync("userInfo");
      this.form.mobile = binding;
      // if (store_id > 0) {
      // 	this.$utils.toUrl('/pages/home/home', 'reLaunch')
      // } else {
      // this.$allrequest.user.login_by_user_id({
      // 	user_id: id
      // }).then(ress => {
      // 	if (ress.code == 0 && ress.data.store_id > 0) {
      // 		uni.setStorageSync('store_id', ress.data.store_id)
      // 		this.$utils.toUrl('/pages/home/home', 'reLaunch')
      // 	}
      // })
      // }
    }
  },
  methods: {
    // 获取商城类目
    async getClass() {
      const res = await this.$allrequest.merchant.classList();
      if (res.code == 0) {
        this.classify = res.data;
      }
    },
    // 切换类目
    changeClass(e) {
      let index = e.detail.value;
      this.form.cat_id = this.classify[index].id;
      this.catName = this.classify[index].name;
    },
    addPic(e) {
      this.$utils.uploadImage(1, (res) => {
        this.form[e] = res;
      });
    },

    // 提交
    async submit() {
      if (this.form.name == "") {
        uni.showToast({
          title: "请输入店铺名称",
          icon: "none"
        });
        return;
      }
      if (this.form.cat_id == "") {
        uni.showToast({
          title: "请选择店铺类目",
          icon: "none"
        });
        return;
      }
      if (this.form.mobile == "") {
        uni.showToast({
          title: "请输入手机号",
          icon: "none"
        });
        return;
      }
      if (this.form.password == "") {
        uni.showToast({
          title: "请输入密码",
          icon: "none"
        });
        return;
      }
      if (this.form.logo == "") {
        uni.showToast({
          title: "请上传店铺logo",
          icon: "none"
        });
        return;
      }
      if (!this.read) {
        uni.showToast({
          title: "请阅读并同意入驻协议",
          icon: "none"
        });
        return;
      }
      const res = await this.$allrequest.merchant.applyShop(
        {
          ...this.form
        },
        true
      );
      if (res.code == 0) {
        uni.showToast({
          title: "提交成功，请等待审核",
          icon: "none",
          image: "",
          duration: 2000
        });
        setTimeout(() => {
          this.$utils.goBack(1);
        }, 2000);
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
      }
    },
    // 获取入驻门店协议和轮播图
    async getConfig() {
      const res = await this.$allrequest.merchant.applyGet({
        type: "2"
      });
      if (res.code == 0) {
        this.configData = res.data;
      }
    },
    gotoAgreement() {
      uni.setStorageSync("richText", this.configData.store_apply_agreement);
      this.$utils.toUrl("/md_admin/apply-md/richText");
    },
    // 获取申请审核状态
    async getApplyStatus() {
      const res = await this.$allrequest.merchant.getApplyStatus();
      if (res.code == 0) {
        if (res.data) {
          this.status = res.data.status;
          this.form.name = res.data.name;
          this.form.cat_id = res.data.cat_id;
          this.form.logo = res.data.logo;
          this.catName = res.data.category_name;
          if (res.data.status === "1" && res.data.store_id > 0) {
            setTimeout(() => {
              uni.showModal({
                title: "提示",
                showCancel: false,
                content: "您的店铺已经审核通过, 点击确定进入您的商城!",
                success: (result) => {
                  if (result.confirm) {
                    let that = this;
                    uni.login({
                      provider: "weixin",
                      complete(log_res) {
                        if (log_res.errMsg === "login:ok") {
                          that.$allrequest.user
                            .updateUserWechatOpenId({ code: log_res.code })
                            .then();
                        }
                      }
                    });
                    setTimeout(() => {
                      // uni.setStorageSync("store_id", res.data.store_id);
                      this.$store.commit("setStoreId", res.data.store_id);
                      this.$utils.toUrl("/pages/home/home", "reLaunch");
                    }, 1000);
                  }
                }
              });
            }, 800);
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.applyShop {
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .swiper {
    width: 100%;
    height: 320rpx;
    .pic {
      width: 100%;
      height: 100%;
    }
  }
  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .ttile {
        font-size: 30rpx;
      }
      input {
        text-align: right;
        color: #8c8c8c;
      }
      .chooseClass {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 24rpx;
        }
      }
    }
    .choosePic {
      padding: 30rpx 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #1d1d1d;
        text:nth-child(2) {
          color: #8c8c8c;
        }
      }
      .choose {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        margin-top: 30rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 60rpx;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
        .close {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          right: -16rpx;
          top: -16rpx;
          background-color: #f0250e;
          color: #fff;
          font-size: 28rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .foot {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      width: 680rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 999rpx;
    }
    .tip {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
</style>
